<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <form action="http://localhost:8081/add" method="POST" role="form">
            <legend>提交名单</legend>
            <!-- 修改信息时需要传递id用的 -->
            <div class="form-group" style="display: none;">
                <label for="">参数id，这里是不显示在页面上的</label>
                <input type="text" class="form-control" id="hiddenId" name="id" placeholder="id">
            </div>

            <div class="form-group">
                <label for="">名字</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="">年龄</label>
                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
            </div>
            <div class="form-group">
                <label for="">爱好</label>
                <input type="text" class="form-control" id="like" name="like" placeholder="请输入爱好">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    
    <script>
        // 此处js所有代码都是为了传递id
        new Vue({
            el:"#app",
            data:{
            },
            mounted() {
                let {id,name,age,like} = this.getUrlParms("id");
                console.log(decodeURI(name));
                if(id){
                    console.log(id);
                    var fg = document.getElementById("hiddenId");
                    $('#name').attr('placeholder',decodeURI(name));
                    $('#age').attr('placeholder',age);
                    $('#like').attr('placeholder',decodeURI(like));
                    fg.value = id;
                }
            },
            methods: {
                getUrlParms(name){
                    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    // console.log(r);
                    if(r){
                        var ot = r.input.split("&");
                        var obj = {
                            id:unescape(r[2]),
                            name:ot[1],
                            age:ot[2],
                            like:ot[3]
                        }
                        // console.log('obj: ', obj);
                        return obj;
                    }
                    return null;
                },
            },
        })
    </script>
</body>
</html>